<script>
  import Vue from 'vue'
  import VueAMap from 'vue-amap'

  Vue.use(VueAMap)
  VueAMap.initAMapApiLoader({
    key: '32396af00cd726deed804cf5b63ed2d8',
    plugin: [
      'AMap.Autocomplete',
      'AMap.PlaceSearch',
      'AMap.Scale',
      'AMap.OverView',
      'AMap.ToolBar',
      'AMap.MapType',
      'AMap.PolyEditor',
      'AMap.CircleEditor'
    ],
    v: '1.4.4'
  })
  import Voice from '@/components/Voice'
  import { parseTime } from '@/utils/common.js'
  import { emotion } from '@/utils/index.js'
  export default {
    name: 'ChatContent',
    props: {
      message: {
        type: Object,
        default: () => ({})
      },
      queryChat: {
        type: Object,
        default: () => ({})
      }
    },
    components: { Voice },
    data() {
      return {}
    },
    computed: {
      content() {
        let typeDict = {
          text: 'content',
          image: 'attachment',
          emotion: 'attachment',
          file: 'filename',
          docmsg: 'title',
          video: 'attachment',
          voice: 'attachment',
          location: 'address',
          weapp: 'title'
        }
        let attr = typeDict[this.message.msgType]
        if (attr) {
          return JSON.parse(this.message.contact)[typeDict[this.message.msgType]]
        } else {
          return JSON.parse(this.message.contact)
        }
      }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
      setIndex(str) {
        return emotion.findIndex((dd) => dd === str)
      },
      setDate(str) {
        return parseTime(str)
      }
    }
  }
</script>

<template>
  <div :class="{ 'message-right': message.fromId === queryChat.fromId, message: message.fromId !== queryChat.fromId }">
    <template v-if="message.msgType === 'text'">
      <template v-if="setIndex(JSON.parse(message.contact).content) == -1">
        <div>
          {{ content }}
        </div>
      </template>
      <img
        v-else
        :src="`https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${setIndex(
          JSON.parse(this.message.contact).content
        )}.gif`"
        alt=""
      />
    </template>
    <template v-else-if="message.msgType === 'revoke'"> 已撤回 </template>
    <template v-else-if="'image,emotion'.includes(message.msgType)">
      <el-image style="width: 100px; height: 100px;" :src="content" fit="fit" :preview-src-list="[content]"> </el-image>
    </template>
    <a v-else-if="'file'.includes(message.msgType)" class="msgtypefile">
      <!-- :href="JSON.parse(this.message.contact).attachment"
      target="_black" -->
      {{ content }}
    </a>
    <a
      v-else-if="'docmsg'.includes(message.msgType)"
      class="msgtypefile"
      :href="JSON.parse(this.message.contact).link_url"
      target="_black"
    >
      {{ content }}
    </a>
    <div v-else-if="message.msgType === 'voice'">
      <voice :amrUrl="JSON.parse(message.contact)['attachment']"></voice>
      <span style="font-size: 12px; color: #999;">语音消息</span>
    </div>
    <div v-else-if="message.msgType === 'meeting_voice_call'">
      <voice :amrUrl="JSON.parse(message.contact)['attachment']"></voice>
      <span style="font-size: 12px; color: #999;" v-if="JSON.parse(message.contact)['endtime']"
        >语音通话-结束时间：{{ setDate(JSON.parse(message.contact)['endtime']) }}</span
      >
    </div>
    <template v-else-if="message.msgType === 'video'">
      <video
        id="video"
        class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        webkit-playsinline="true"
        playsinline="true"
        :autoplay="false"
        preload="none"
        style="height: 100%; width: 100%;"
      >
        <source :src="content" type="video/mp4" />
      </video>
    </template>
    <div v-else-if="message.msgType === 'location'" class="msgtypecard">
      <div class="card-content" style="height: 100%; width: 100%;">
        <el-amap
          ref="map"
          vid="amapDemo"
          :center="[JSON.parse(message.contact).longitude, JSON.parse(message.contact).latitude]"
          :zoom="14"
          class="amap-demo"
          style="height: 120px; width: 250px; pointer-events: none;"
        >
          <el-amap-marker
            :position="[JSON.parse(message.contact).longitude, JSON.parse(message.contact).latitude]"
          ></el-amap-marker>
        </el-amap>
      </div>
      <div class="card-foot">{{ content }}</div>
    </div>
    <div v-else-if="message.msgType === 'weapp'" class="msgtypecard">
      <div class="card-content">{{ content }}</div>
      <div class="card-foot">小程序</div>
    </div>
    <div v-else-if="message.msgType === 'card'" class="msgtypecard">
      <div class="card-content">
        <span style="flex: none;"> {{ content.corpname }}： </span>
        <span>
          {{ content.userid }}
        </span>
      </div>
      <div class="card-foot">个人名片</div>
    </div>
    <!-- 图文链接 -->
    <div v-else-if="message.msgType === 'link'" class="msgtypecard">
      <a target="_black" :href="content.link_url">
        <div class="card-content fxbw">
          <div style="flex: 1;">
            <div class="card--link-title">{{ content.title }}</div>
            <div class="card--link-desc">{{ content.description }}</div>
          </div>
          <el-image style="width: 50px; height: 50px;" :src="content.image_url" fit="fit"></el-image>
        </div>
      </a>
    </div>
    <div v-else-if="message.msgType === 'agree'">
      客户已同意会话存档
    </div>
    <div v-else-if="message.msgType === 'disagree'">
      客户不同意会话存档
    </div>
    <div v-else>不支持的消息类型：{{ message.msgType }}</div>
  </div>
</template>

<style lang="scss" scoped>
  .message {
    max-width: 50%;
    background-color: #fff;
    position: relative;
    padding: 10px;
    line-height: 14px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 2px 6px 0px rgba(60, 136, 240, 0.1);
    border: 1px solid #e1edfc;
    color: #333;
    display: inline-block;
    word-break: break-all;
    margin-left: 10px;
    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      left: -5px;
      box-shadow: 0px 2px 6px 0px rgba(60, 136, 240, 0.1);
      border-width: 5px;
      border-left: 0;
      width: 0;
      border-style: solid;
      border-color: transparent;
      border-right-color: #fff;
      top: 8px;
      z-index: 888;
    }
  }
  .message-right {
    max-width: 50%;
    position: relative;
    background-color: #fff;
    padding: 10px;
    line-height: 14px;
    border-radius: 5px;
    // background: $blue;
    box-shadow: 0px 2px 6px 0px rgba(60, 136, 240, 0.1);
    border: 1px solid #e1edfc;
    color: #333;
    display: inline-block;
    word-break: break-all;
    margin-right: 10px;
    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      right: -5px;
      box-shadow: 0px 2px 6px 0px rgba(60, 136, 240, 0.1);
      border-width: 5px;
      border-right: 0;
      width: 0;
      border-style: solid;
      border-color: transparent;
      border-left-color: #fff;
      top: 8px;
      z-index: 888;
    }
  }
  .msgtypefile {
    margin: 5px;
    width: 200px;
    display: inline-block;
    line-height: 30px;
    cursor: pointer;
    color: #199ed8;
    // text-indent: 10px;
    // box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
  }

  .msgtypecard {
    // width: 320px;
    // height: 140px;
    margin: 10px 5px;
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
    position: relative;
    background: #f8f8f8;
    overflow: hidden;

    .card-content {
      width: 250px;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 10px;
      line-height: 1.5;
      // text-indent: 10px;
      color: #333;
      .card--link-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 5px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        white-space: pre-wrap;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .card--link-desc {
        font-size: 14px;
        color: #aaa;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        white-space: pre-wrap;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .card-foot {
      border-top: 1px solid #efefef;
      text-align: left;
      padding: 10px;
      color: #333;
      font-weight: bold;
      width: 100%;
    }
  }
</style>
